<template>
  <div>
    <h2>侦听器</h2>
    请输入问题: <input type="text" v-model="question" />
    <div>{{ anwser }}</div>
    <hr />
    <h3>侦听器的配置选项-handler配置</h3>
    <h2>{{ info.name }}</h2>
    <h2>{{ info.book.name }}</h2>
    <button @click="changeInfo">改变info</button>
    <button @click="changeInfoName">改变info.name</button>
    <button @click="changeInfoBookName">改变info.book.name</button>
  </div>
</template>

<script>
export default {
  name: 'page-day15',
  data() {
    return {
      question: '',
      anwser: '',
      info: {
        name: '张三',
        age: 18,
        book: { name: 'Vue.js2' }
      }
    }
  },
  watch: {
    question(newValue, oldValue) {
      console.log('question新值', newValue, 'question旧值', oldValue)
      this.queryAnswer()
    },
    info: {
      handler: function (newValue, oldValue) {
        console.log('info新值', newValue, 'info旧值', oldValue)
      },
      deep: false, // 深度侦听，当info的属性发生变化时，也会触发handler函数的执行。
      immediate: false // 立即执行，当info发生变化时，立即执行handler函数。
    }
  },
  methods: {
    queryAnswer() {
      this.anwser = `你的问题是：${this.question}? 答案：哈哈哈哈!`
    },
    changeInfo() {
      this.info = { name: 'kobe', age: 18, book: { name: 'vue.js3' } }
    },
    changeInfoName() {
      this.info.name = 'rose'
    },
    changeInfoBookName() {
      this.info.book.name = 'React'
    }
  }
}
</script>

<style lang="scss" scoped></style>
